<template>
  <div>
    <van-uploader v-model="fileList" multiple :after-read="afterRead" accept="image/*" />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      fileList: [
        {
          url: 'http://192.168.201.31:5555/pic_test/20220726_162222.jpg'
        },
        {
          url: 'http://192.168.201.31:5555/pic_test/20220726_170207.jpg'
        },
        {
          url: 'http://192.168.201.31:5555/pic_test/20220726_170302.jpg'
        },
        {
          url: 'http://192.168.201.31:5555/pic_test/20220726_195948.jpg'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    setInterval(() => {
      console.log(this.fileList)
    }, 2000)
  },
  methods: {
    // beforeRead(file) {
    //   console.log(file.type)
    //   if (file.type !== 'image/*' && file.type !== 'video/*') {
    //     console.log('请上传 jpg 格式图片')
    //     return false
    //   }
    //   return true
    // },
    // onPreview(a, b, c) {
    //   this.fileList[0].url = 'http://192.168.201.31:5555/pic_test/20220726_170207.jpg'
    // },
    async afterRead(e) {
      // 此时可以自行将文件上传至服务器
      e.status = 'uploading'
      e.message = '上传中...'
      console.log('e')
      const fd = new FormData()
      fd.append('file', e.file)
      const res = await this.$http({
        method: 'post',
        url: 'http://192.168.201.31:5555/pic/upload',
        data: fd
      })
      console.log(res)
      e.status = 'done'
    }
  }
}
</script>

<style lang="less" scoped>
</style>
